import React, { useState } from 'react'
import { Tabs, NavBar, Radio, Button } from 'antd-mobile'
import styles from '../css/Tabs.module.css'
import { AaOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
function Tabbar() {
  let nav = useNavigate()
  let [flag, setFlag] = useState(true)
  const gotoList = () => {
    nav(`/list?start=上海&end=北京&date=${Date.now()}&isSpeed=${flag}`)
  }
  return (
    <div>
      <NavBar></NavBar>
      <Tabs>
        <Tabs.Tab title='机票' key='fruits'>
          菠萝
        </Tabs.Tab>
        <Tabs.Tab title='特价机票' key='vegetables'>
          西红柿
        </Tabs.Tab>
        <Tabs.Tab title='火车票' key='animals'>


          <Tabs>
            <Tabs.Tab title='单程' key='fruits'>
              <div>
                <div className={styles.box}>
                  <div className={styles.top}>北京西站</div>
                  <div className={styles.top}><AaOutline color='green' /></div>
                  <div className={styles.top}>上海市</div>
                </div>
                <div className={styles.box}>
                  <p>
                    <span style={{ fontSize: '22px' }}>4</span>
                    <span><b>月</b></span>
                    <span style={{ fontSize: '22px' }}>8</span>
                    <span><b>日</b></span>
                    <span>明天</span>
                  </p>
                </div>
                <div className={styles.box}>
                  <div>
                    <Radio>学生票</Radio>
                  </div>
                  <div>
                    <Radio checked={flag} onClick={()=>{
                      setFlag((k)=>!k)
                      console.log(flag);
                      
                    }}>只看高铁动车</Radio>
                  </div>
                </div>
                <div className={styles.box}>
                  <Button onClick={() => gotoList()} block shape='rounded' color='success'>
                    搜索火车票
                  </Button>
                </div>
              </div>
            </Tabs.Tab>
            <Tabs.Tab title='往返' key='vegetables'>
              西红柿
            </Tabs.Tab>

          </Tabs>




        </Tabs.Tab>
        <Tabs.Tab title='汽车票' key='rgrg'>
          蚂蚁
        </Tabs.Tab>
        <Tabs.Tab title='接送/租车' key='tyj'>
          接送/租车
        </Tabs.Tab>
      </Tabs>
    </div>
  )
}

export default Tabbar
